<template>
  <view class="">
    <yy-paging
      v-model="dataList"
      @query="queryList"
      ref="paging"
      :auto="automatic"
      @scroll="scroll"
      :refresher-enabled="false"
      class="pages"
    >
      <template #top>
        <!-- <u-navbar
          back-text=""
          :is-back="true"
          :title="navTitle"
          :customBack="custombackEvent"
          :background="{ backgroundColor: isScroll ? '#FFFFFF' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
        </u-navbar> -->

        <u-navbar
          :is-back="false"
          :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="grid grid-cols-3 items-center px-3 w-full">
            <view class="flex col-span-1 items-center" @click="custombackEvent">
              <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
            </view>
            <view class="line-clamp-1 flex col-span-1 justify-center">
              <view class="text-[#000] font-bold text-base"> {{ navTitle }}</view>
            </view>
            <view class="flex col-span-1 justify-end">
              <view class="text-[14px] text-[#5C6068]"> </view>
            </view>
          </view>
        </u-navbar>
      </template>
      <view class="flex flex-col gap-2 p-4">
        <text class="text-[#171B24] font-medium text-2xl" id="titles">{{ title }}</text>
        <view class=""></view>
        <!-- 钓点名称 -->
        <view class="rounded-[.5rem] bg-white flex justify-between p-4 items-center gap-4">
          <input
            type="text"
            class="text-[.9375rem] flex-1 text-[#171B24] font-medium"
            placeholder="钓点标题"
            maxlength="15"
            v-model="form.name"
          />
          <text class="text-[.75rem] text-[#C1C4C9] font-medium">{{ form.name.length }}/15</text>
        </view>
        <!-- 钓点描述 -->
        <view class="rounded-[.5rem] bg-white p-4 flex flex-col gap-4">
          <view class="flex flex-col gap-1">
            <textarea
              placeholder="描述下钓点环境、停车点到钓位的距离等"
              class="w-full max-h-[150px]"
              maxlength="200"
              v-model="form.description"
            ></textarea>
            <view class="flex justify-between">
              <view></view>
              <view class="font-medium text-[.75rem] text-[#C1C4C9]"> {{ form.description.length }}/200 </view>
            </view>
          </view>
          <view class="border-t"></view>
          <view class="grid grid-cols-4 gap-2">
            <view
              @click="uploads(1)"
              class="aspect-square bg-[#F4F6F8] overflow-hidden rounded-[.5rem] col-span-1 relative flex justify-center items-center"
            >
              <view
                class="w-[2rem] h-[1rem] bg-[#00A9AB] rounded-[.5rem_0rem_.5rem_0rem] flex justify-center items-center absolute top-0 left-0 z-50"
              >
                <view class="text-[.625rem] text-[#FFFFFF]"> 封面 </view>
              </view>
              <image :src="form.images[0]" mode="aspectFill" class="size-full" v-if="form.images[0]" />
              <image src="/static/dddr4.png" class="size-[1.5rem]" alt="" v-else />

              <view
                v-if="form.images[0]"
                @click.stop="deleteImage(0)"
                class="w-[1.25rem] h-[1.25rem] bg-[#000000]/40 rounded-[0rem_.5rem_0rem_.5rem] absolute right-0 top-0 flex justify-center items-center"
              >
                <u-icon name="close" color="#fff" size="20"></u-icon>
              </view>
            </view>
            <view
              @click="uploads(2)"
              class="aspect-square bg-[#F4F6F8] overflow-hidden rounded-[.5rem] col-span-1 relative flex justify-center items-center"
            >
              <view
                class="w-[2.625rem] h-[1rem] bg-[#171B24] rounded-[.5rem_0rem_.5rem_0rem] flex justify-center items-center absolute top-0 left-0 z-50"
              >
                <view class="text-[.625rem] text-[#FFFFFF]"> 环境图 </view>
              </view>

              <image :src="form.images[1]" mode="aspectFill" class="size-full" v-if="form.images[1]" />
              <image src="/static/dddr5.png" class="size-[1.5rem]" alt="" v-else />

              <view
                v-if="form.images[1]"
                @click.stop="deleteImage(1)"
                class="w-[1.25rem] h-[1.25rem] bg-[#000000]/40 rounded-[0rem_.5rem_0rem_.5rem] absolute right-0 top-0 flex justify-center items-center"
              >
                <u-icon name="close" color="#fff" size="20"></u-icon>
              </view>
            </view>
            <view
              @click="uploads(3)"
              class="aspect-square bg-[#F4F6F8] overflow-hidden rounded-[.5rem] col-span-1 relative flex justify-center items-center"
            >
              <view
                class="w-[2.625rem] h-[1rem] bg-[#171B24] rounded-[.5rem_0rem_.5rem_0rem] flex justify-center items-center absolute top-0 left-0 z-50"
              >
                <view class="text-[.625rem] text-[#FFFFFF]"> 渔获图 </view>
              </view>
              <image :src="form.images[2]" mode="aspectFill" class="size-full" v-if="form.images[2]" />
              <image src="/static/dddr6.png" class="size-[1.5rem]" alt="" v-else />

              <view
                v-if="form.images[2]"
                @click.stop="deleteImage(2)"
                class="w-[1.25rem] h-[1.25rem] bg-[#000000]/40 rounded-[0rem_.5rem_0rem_.5rem] absolute right-0 top-0 flex justify-center items-center"
              >
                <u-icon name="close" color="#fff" size="20"></u-icon>
              </view>
            </view>
            <view
              class="bg-[#F4F6F8] rounded-[.5rem] aspect-square flex justify-center items-center relative border overflow-hidden"
              v-for="(i, k) in form.imagess"
              :key="k"
            >
              <image :src="i" class="size-full" mode="aspectFill" />
              <view
                @click="deleteImages(k)"
                class="w-[1.25rem] h-[1.25rem] bg-[#000000]/40 rounded-[0rem_.5rem_0rem_.5rem] absolute right-0 top-0 flex justify-center items-center"
              >
                <u-icon name="close" color="#fff" size="20"></u-icon>
              </view>
            </view>
            <view
              class="bg-[#F4F6F8] rounded-[.5rem] aspect-square flex justify-center items-center relative border"
              @click="uploads()"
            >
              <view class="bg-[#F4F6F8] rounded-[.5rem] aspect-square flex justify-center items-center">
                <image src="/static/dddr39.png" class="size-[1.75rem]" mode="aspectFill" />
              </view>
            </view>
          </view>
        </view>
        <!-- 钓点位置 -->
        <view class="rounded-[.5rem] bg-white p-4 flex flex-col gap-4">
          <view class="flex gap-2 justify-between items-center">
            <view class="text-[.875rem] text-[#171B24] font-medium whitespace-nowrap">钓点位置</view>
            <view class="flex items-center bg-[#F4F6F8] rounded-[.75rem] py-1 px-2" @click="openMap">
              <image src="/static/dddr17.png" mode="aspectFill" class="size-[1rem] flex-none" />
              <view class="text-[.75rem] text-[#C1C4C9] font-medium line-clamp-1">
                {{ form.location_name === '地图位置' ? form.address : form.location_name || '添加钓点位置' }}
              </view>
              <image src="/static/dddr57.png" mode="aspectFill" class="size-[1rem]" />
            </view>
          </view>
          <view class="flex items-center gap-2 h-[5.5rem] *:h-full">
            <view
              @click="videoUpload"
              class="bg-[#F4F6F8] rounded-[.5rem] w-[4.125rem] flex justify-center items-center relative !overflow-hidden"
            >
              <template v-if="form.video">
                <image
                  :src="`${form.video}?x-oss-process=video/snapshot,t_10,f_jpg`"
                  class="size-full"
                  mode="aspectFill"
                  @click.stop="fullScreenPlayback(form.video)"
                />
              </template>
              <image src="/static/dddr39.png" v-else class="size-[1.75rem]" mode="aspectFill" />
              <view
                v-if="form.video"
                @click.stop="deleteVideo(0)"
                class="w-[1.25rem] h-[1.25rem] bg-[#000000]/40 rounded-[0rem_.5rem_0rem_.5rem] absolute right-0 top-0 flex justify-center items-center"
              >
                <u-icon name="close" color="#fff" size="20"></u-icon>
              </view>
              <view
                @click.stop
                class="w-full h-[1.125rem] bg-[#000000] flex items-center justify-center absolute bottom-0 left-0 z-50"
              >
                <view class="font-medium text-[.625rem] text-[#FFFFFF]"> 视频指路 </view>
              </view>
            </view>
            <view class="rounded-[.5rem] flex-1 overflow-hidden">
              <image src="/static/dddr115.png" class="size-full" mode="aspectFill" />
            </view>
          </view>
        </view>
        <!-- 金额 -->
        <view class="rounded-[.5rem] bg-white p-4 flex flex-col gap-4">
          <view class="flex justify-between items-center">
            <view class="text-[.875rem] text-[#171B24] font-medium text-nowrap">付费钓点</view>
            <!-- <u-switch v-model="is_paid" /> -->
            <switch :checked="is_paid" @change="openCharging" color="#00A9AB" style="transform: scale(0.7)" />
          </view>
          <template v-if="is_paid">
            <view class="h-[2.5rem] bg-[#F2F5F7] rounded-[.5rem] flex items-center gap-1 px-2">
              <input
                type="number"
                @blur="validateInput"
                :placeholder="`${getBasanOptionData.price_range[0]} ~ ${getBasanOptionData.price_range[1]}`"
                v-model="form.paid_amount"
                class="text-[.9375rem] flex-1 text-[#161A24] font-medium"
              />
              <view class="flex items-center" v-if="form.paid_amount" @click="form.paid_amount = ''">
                <image src="/static/dddr42.png" class="size-4" mode="aspectFill" />
              </view>
            </view>
            <view class="grid grid-cols-4 gap-2">
              <view
                v-for="(item, index) in getBasanOptionData.prices"
                class="grid place-content-center py-2 rounded-full border"
                :key="index"
                :class="form.paid_amount === item ? 'bg-[#E5F6F6] border-[#00A9AB]' : 'bg-[#F4F6F8] border-transparent'"
                @click="form.paid_amount = item"
              >
                <view class="text-[.75rem]" :class="form.paid_amount === item ? 'text-[#00A9AB]' : 'text-[#161A24]'"
                  >{{ item }}钻</view
                >
              </view>
            </view>
          </template>
        </view>
        <!-- getBasanOptionData -->
        <!-- 渔政监管强度 -->
        <view class="rounded-[.5rem] bg-white p-4 flex flex-col gap-4">
          <view class="flex justify-between items-center">
            <view class="text-[.875rem] text-[#171B24] font-medium text-nowrap">渔政监管强度</view>
          </view>

          <view class="grid grid-cols-4 gap-2">
            <view
              v-for="(item, index) in getBasanOptionData.supervise"
              class="grid place-content-center py-2 rounded-full border"
              :key="index"
              :class="form.supervise === item ? 'bg-[#E5F6F6] border-[#00A9AB]' : 'bg-[#F4F6F8] border-transparent'"
              @click="form.supervise = item"
            >
              <view class="text-[.75rem]" :class="form.supervise === item ? 'text-[#00A9AB]' : 'text-[#161A24]'"
                >{{ item }}
              </view>
            </view>
          </view>
        </view>

        <!-- 可钓鱼种 -->
        <view class="rounded-[.5rem] bg-white flex justify-between p-4 items-center gap-4" @click="jumpToSelectFish">
          <view class="text-[.875rem] text-[#171B24] font-medium flex-none">可钓鱼种</view>
          <view class="w-[80%] flex items-center justify-between">
            <view class="text-[.8125rem] text-[#171B24] overflow-hidden text-right flex-1">
              <text v-for="(i, k) in form.fish_species" :key="k">
                {{ getNameById('fish_species', i) }}
                {{ k !== form.fish_species.length - 1 ? ' , ' : '' }}
              </text>
            </view>
            <image src="/static/dddr58.png" mode="aspectFill" class="size-[1rem] flex-none" />
          </view>
        </view>
        <!-- 作钓类型 -->
        <view
          class="rounded-[.5rem] bg-white flex justify-between p-4 items-center gap-4"
          @click="openModalWithSelection('fish_type')"
        >
          <view class="text-[.875rem] text-[#171B24] font-medium flex-none">作钓类型</view>
          <view class="w-[80%] flex items-center justify-between">
            <view class="text-[.8125rem] text-[#171B24] overflow-hidden text-right flex-1">
              {{ getNameById('fish_type', form.fish_type) }}</view
            >
            <image src="/static/dddr58.png" mode="aspectFill" class="size-[1rem] flex-none" />
          </view>
        </view>
        <view class="rounded-[.5rem] bg-white p-4 flex flex-col gap-6">
          <!-- 鱼竿长度 -->
          <view class="flex justify-between items-center" @click="openModalWithSelection('rod_length')">
            <view class="text-[.875rem] text-[#171B24] font-medium flex-none">鱼竿长度</view>
            <view class="w-[80%] flex items-center justify-between">
              <view class="text-[.8125rem] text-[#171B24] overflow-hidden text-right flex-1">
                {{ getNameById('rod_length', form.rod_length) }}
                <span v-if="form.rod_length"> m</span>
              </view>
              <image src="/static/dddr58.png" mode="aspectFill" class="size-[1rem] flex-none" />
            </view>
          </view>
          <!-- 主线大小 -->
          <view class="flex justify-between items-center" @click="showMainLine = true">
            <view class="text-[.875rem] text-[#171B24] font-medium flex-none">主线大小</view>
            <view class="w-[80%] flex items-center justify-between">
              <view class="text-[.8125rem] text-[#171B24] overflow-hidden text-right flex-1">
                {{ form.main_line_length || '' }}
                <text v-if="form.main_line_length">m</text>
                <span v-if="form.main_line_length && form.main_line_size"> , </span>
                {{ form.main_line_size || '' }}
                <text v-if="form.main_line_size">#</text>
              </view>
              <image src="/static/dddr58.png" mode="aspectFill" class="size-[1rem] flex-none" />
            </view>
          </view>
          <!-- 子线大小 -->
          <view class="flex justify-between items-center" @click="showSubLines = true">
            <view class="text-[.875rem] text-[#171B24] font-medium flex-none">子线大小</view>
            <view class="w-[80%] flex items-center justify-between">
              <view class="text-[.8125rem] text-[#171B24] overflow-hidden text-right flex-1">
                {{ form.sub_line_size || '' }}
                <span v-if="form.sub_line_size">#</span>
              </view>
              <image src="/static/dddr58.png" mode="aspectFill" class="size-[1rem] flex-none" />
            </view>
          </view>
          <!-- 鱼钩 -->
          <view class="flex justify-between items-center" @click="openModalWithSelection('fish_hook_type')">
            <view class="text-[.875rem] text-[#171B24] font-medium flex-none">鱼钩</view>
            <view class="w-[80%] flex items-center justify-between">
              <view class="text-[.8125rem] text-[#171B24] overflow-hidden text-right flex-1">
                {{ getNameById('fish_hook_type', form.fish_hook_type) }}

                <text v-if="form.fish_hook_type"> {{ form.fish_hook_size + 1 }}# </text>
              </view>
              <image src="/static/dddr58.png" mode="aspectFill" class="size-[1rem] flex-none" />
            </view>
          </view>
        </view>
        <!-- 浮漂 -->
        <view
          class="rounded-[.5rem] bg-white flex justify-between p-4 items-center gap-4"
          @click="openModalWithSelection('float_type')"
        >
          <view class="text-[.875rem] text-[#171B24] font-medium flex-none">浮漂</view>
          <view class="w-[80%] flex items-center justify-between">
            <view class="text-[.8125rem] text-[#171B24] overflow-hidden text-right flex-1">
              {{ getNameById('float_type', form.float_type) }}
              <text v-if="form.float_lead_weight && form.float_lead_weight != '0.00'">
                {{ form.float_lead_weight }}g
              </text>
            </view>
            <image src="/static/dddr58.png" mode="aspectFill" class="size-[1rem] flex-none" />
          </view>
        </view>
        <view class="rounded-[.5rem] bg-white p-4 flex flex-col gap-6" @click="openModalWithSelection('bait_name')">
          <!-- 饵料名称 -->
          <view class="flex justify-between items-center">
            <view class="text-[.875rem] text-[#171B24] font-medium flex-none">饵料名称</view>
            <view class="w-[80%] flex items-center justify-between">
              <view class="text-[.8125rem] text-[#171B24] overflow-hidden text-right flex-1">
                {{ getNameById('bait_name', form.bait_name) }}
              </view>
              <image src="/static/dddr58.png" mode="aspectFill" class="size-[1rem] flex-none" />
            </view>
          </view>
          <!-- 开饵水比 -->
          <view class="flex justify-between items-center">
            <view class="text-[.875rem] text-[#171B24] font-medium flex-none">开饵水比</view>
            <view class="w-[80%] flex items-center justify-between">
              <view class="text-[.8125rem] text-[#171B24] overflow-hidden text-right flex-1">
                <view class="" v-if="form.bait_water_ratio_min && form.bait_water_ratio_max">
                  {{ form.bait_water_ratio_min }}
                  <text> :</text>
                  {{ form.bait_water_ratio_max }}
                </view>
              </view>

              <image src="/static/dddr58.png" mode="aspectFill" class="size-[1rem] flex-none" />
            </view>
          </view>
          <!-- 饵料状态 -->
          <view class="flex justify-between items-center">
            <view class="text-[.875rem] text-[#171B24] font-medium flex-none">饵料状态</view>
            <view class="w-[80%] flex items-center justify-between">
              <view class="text-[.8125rem] text-[#171B24] overflow-hidden text-right flex-1">
                {{ getNameById('bait_status', form.bait_status) }}
              </view>
              <image src="/static/dddr58.png" mode="aspectFill" class="size-[1rem] flex-none" />
            </view>
          </view>
        </view>
        <view v-for="(i, k) in 10" :key="k"></view>
      </view>
      <view class="fixed bottom-0 z-[99] w-full pb-env bg-white">
        <view class="px-4 py-3 bg-white rounded-t-[1rem] grid grid-cols-3 gap-4">
          <view class="flex col-span-1 justify-center" v-if="hasUserData">
            <view
              class="h-[2.75rem] bg-[#F4F6F8] w-full rounded-full flex items-center justify-center"
              @click="saveDraft"
            >
              <text class="text-[1rem] text-[#161A24]">存草稿</text>
            </view>
          </view>
          <view class="flex justify-center" :class="hasUserData ? 'col-span-2' : 'col-span-3'">
            <view
              class="h-[2.75rem] bg-[#00A9AB] w-full rounded-full flex items-center justify-center"
              @click="release"
            >
              <text class="text-[1rem] text-[#E5F6F6]">{{ isEdit ? '编辑' : '发布' }}</text>
            </view>
          </view>
        </view>
      </view>
    </yy-paging>

    <!-- 鱼钩弹框 -->
    <yy-modal v-model="showFishHooks" title="鱼钩" @reset="fishHookReset" @submit="showFishHooks = false">
      <view class="flex flex-col gap-3">
        <view class="flex text-[.875rem] text-[#171B24] justify-between">
          <view>鱼钩类型</view>
          <view
            class="flex gap-1 items-center"
            @click="editingOptions('fish_hook_type')"
            v-if="getBasanOptionData.fish_hook_type.some(item => item.user_id !== 0)"
          >
            <image src="/static/dddr23.png" mode="aspectFill" class="size-[1rem]" />
            <view class="text-[.8125rem] text-[#919499]">
              {{ editingStates.fish_hook_type ? '完成' : '编辑' }}
            </view>
          </view>
        </view>
        <view class="flex flex-wrap gap-3">
          <view
            class="col-span-1 flex justify-center relative items-center rounded-[1.125rem] p-2 border border-solid"
            v-for="(i, k) in getBasanOptionData.fish_hook_type"
            :key="k"
            :class="
              isSelected('fish_hook_type', k)
                ? 'text-[#00A9AB] bg-[#E5F6F6] border-[#00A9AB]'
                : 'text-[#171B24] bg-[#F4F6F8] border-transparent'
            "
            @click="toggleMultiSelect('fish_hook_type', k, i.type)"
          >
            <text class="text-[.75rem] line-clamp-1">{{ i.name }}</text>
            <view v-if="i.user_id && i.isSelected" class="ml-1" @click.stop="deleteBasanOption(i.id, 'fish_hook_type')">
              <u-icon name="close" color="#919499" class="" size="22"></u-icon>
            </view>
          </view>
        </view>
        <view class="flex justify-between items-center">
          <view class="flex text-[.875rem] text-[#171B24]"> 自定义 </view>
        </view>
        <view class="flex flex-wrap gap-3 items-center">
          <view
            class="flex justify-center items-center rounded-[1.125rem] px-3 py-2 bg-[#F4F6F8]"
            @click="add('添加鱼钩类型', 'fish_hook_type')"
          >
            <u-icon name="plus" color="#919499" size="26"></u-icon>
          </view>
        </view>
        <view class="solid border-t"></view>
        <view class="flex text-[.875rem] text-[#171B24]"> 鱼钩大小 </view>
        <picker-view
          :value="[form.fish_hook_size]"
          @change="bindChange"
          :indicatorStyle="indicatorStyle"
          class="picker-view"
        >
          <picker-view-column>
            <view class="item" v-for="(item, index) in 99" :key="index">{{ item }} #</view>
          </picker-view-column>
        </picker-view>
      </view>
    </yy-modal>
    <!-- 主线弹框 -->
    <yy-modal v-model="showMainLine" title="主线" @reset="resetMainLine" @submit="showMainLine = false">
      <view class="flex flex-col gap-3">
        <view class="flex text-[.875rem] text-[#171B24]"> 主线长度/m </view>
        <view class="bg-[#F4F6F8] rounded-[.5rem] h-[2.5rem] px-2">
          <input
            type="digit"
            placeholder="建议的主线长度"
            v-model="form.main_line_length"
            maxlength="3"
            class="size-full text-left text-[1rem] text-[#171B24]"
          />
        </view>
        <view class="flex text-[.875rem] text-[#171B24]"> 主线线号/# </view>
        <view class="bg-[#F4F6F8] rounded-[.5rem] h-[2.5rem] px-2">
          <input
            type="digit"
            placeholder="建议的主线线号"
            v-model="form.main_line_size"
            maxlength="3"
            class="size-full text-left text-[1rem] text-[#171B24]"
          />
        </view>
      </view>
    </yy-modal>

    <!-- 浮漂弹框 -->
    <yy-modal v-model="showFloat" title="浮漂" @reset="resetFloat" @submit="showFloat = false">
      <view class="flex flex-col gap-3">
        <view class="flex text-[.875rem] text-[#171B24] justify-between">
          <view> 浮漂类型</view>
          <view
            class="flex gap-1 items-center"
            @click="editingOptions('float_type')"
            v-if="getBasanOptionData.float_type.some(item => item.user_id !== 0)"
          >
            <image
              src="/static/dddr23.png"
              mode="aspectFill"
              class="size-[1rem]"
              v-if="editingStates.float_type == '编辑'"
            />
            <view class="text-[.8125rem] text-[#919499]">
              {{ editingStates.float_type ? '完成' : '编辑' }}
            </view>
          </view>
        </view>
        <view class="flex flex-wrap gap-3">
          <view
            class="col-span-1 flex justify-center items-center rounded-[1.125rem] p-2 border border-solid relative"
            v-for="(i, k) in getBasanOptionData.float_type"
            :key="k"
            :class="
              isSelected('float_type', k)
                ? 'text-[#00A9AB] bg-[#E5F6F6] border-[#00A9AB]'
                : 'text-[#171B24] bg-[#F4F6F8] border-transparent'
            "
            @click="toggleMultiSelect('float_type', k, i.type)"
          >
            <!-- <view
              class="flex absolute -top-1 -right-1 justify-end px-1 leading-none"
              v-if="i.user_id && i.isSelected"
              @click.stop="deleteBasanOption(i.id, 'float_type')"
            >
              <u-icon name="close" color="#919499" class="" size="22"></u-icon>
            </view> -->
            <text class="text-[.75rem] line-clamp-1">{{ i.name }}</text>
            <view v-if="i.user_id && i.isSelected" class="ml-1" @click.stop="deleteBasanOption(i.id, 'float_type')">
              <u-icon name="close" color="#919499" class="" size="22"></u-icon>
            </view>
          </view>
        </view>
        <view class="flex justify-between items-center">
          <view class="flex text-[.875rem] text-[#171B24]"> 自定义 </view>
        </view>
        <view class="flex flex-wrap gap-3 items-center">
          <view
            class="flex justify-center items-center rounded-[1.125rem] px-3 py-2 bg-[#F4F6F8]"
            @click="add('添加浮漂类型', 'float_type')"
          >
            <u-icon name="plus" color="#919499" size="26"></u-icon>
          </view>
        </view>
        <view class="solid border-t"></view>
        <view class="flex text-[.875rem] text-[#171B24]"> 浮漂铅重/g </view>
        <view class="bg-[#F4F6F8] rounded-[.5rem] h-[2.5rem] px-2">
          <input
            type="digit"
            placeholder="输入浮漂铅重"
            v-model="form.float_lead_weight"
            maxlength="3"
            class="size-full text-left text-[1rem] text-[#171B24]"
          />
        </view>
      </view>
    </yy-modal>
    <!-- 饵料弹框 -->
    <yy-modal v-model="showBait" title="饵料" @reset="baitReset" @submit="showBait = false">
      <view class="flex flex-col gap-3">
        <view class="flex text-[.875rem] text-[#171B24] justify-between">
          <view> 饵料名称 </view>
          <view
            class="flex gap-1 items-center"
            @click="editingOptions('bait_name')"
            v-if="getBasanOptionData.bait_name.some(item => item.user_id !== 0)"
          >
            <image
              src="/static/dddr23.png"
              mode="aspectFill"
              class="size-[1rem]"
              v-if="editingStates.bait_name == '编辑'"
            />

            <view class="text-[.8125rem] text-[#919499]">
              {{ editingStates.bait_name ? '完成' : '编辑' }}
            </view>
          </view>
        </view>
        <view class="flex flex-wrap gap-3">
          <view
            class="col-span-1 flex justify-center items-center rounded-[1.125rem] p-2 border border-solid relative"
            v-for="(i, k) in getBasanOptionData.bait_name"
            :key="k"
            :class="
              isSelected('bait_name', k)
                ? 'text-[#00A9AB] bg-[#E5F6F6] border-[#00A9AB]'
                : 'text-[#171B24] bg-[#F4F6F8] border-transparent'
            "
            @click="toggleMultiSelect('bait_name', k, i.type)"
          >
            <!-- <view
              class="flex absolute -top-1 -right-1 justify-end px-1 leading-none"
              v-if="i.user_id && i.isSelected"
              @click.stop="deleteBasanOption(i.id, 'bait_name')"
            >
              <u-icon name="close" color="#919499" class="" size="22"></u-icon>
            </view>
            <text class="text-[.75rem] line-clamp-1">{{ i.name }}</text> -->
            <text class="text-[.75rem] line-clamp-1">{{ i.name }}</text>
            <view v-if="i.user_id && i.isSelected" class="ml-1" @click.stop="deleteBasanOption(i.id, 'bait_name')">
              <u-icon name="close" color="#919499" class="" size="22"></u-icon>
            </view>
          </view>
        </view>
        <view class="flex justify-between items-center">
          <view class="flex text-[.875rem] text-[#171B24]"> 自定义 </view>
        </view>
        <view class="flex flex-wrap gap-3 items-center">
          <view
            class="flex justify-center items-center rounded-[1.125rem] px-3 py-2 bg-[#F4F6F8]"
            @click="add('添加饵料名称', 'bait_name')"
          >
            <u-icon name="plus" color="#919499" size="26"></u-icon>
          </view>
        </view>
        <view class="flex text-[.875rem] text-[#171B24]"> 开饵水比 </view>
        <view class="flex gap-4 items-center">
          <view class="bg-[#F4F6F8] rounded-[.5rem] h-[2.5rem] px-2">
            <input
              type="digit"
              class="size-full text-center text-[1rem] text-[#171B24]"
              v-model="form.bait_water_ratio_min"
              placeholder="0"
              maxlength="20"
            />
          </view>
          <view class="font-medium text-[1rem] text-[#171B24]"> : </view>
          <view class="bg-[#F4F6F8] rounded-[.5rem] h-[2.5rem] px-2">
            <input
              type="digit"
              class="size-full text-center text-[1rem] text-[#171B24]"
              v-model="form.bait_water_ratio_max"
              placeholder="0"
              maxlength="20"
            />
          </view>
        </view>
        <view class="solid border-t"></view>
        <view class="flex text-[.875rem] text-[#171B24] justify-between">
          <view> 饵料状态</view>
          <view
            class="flex gap-1 items-center"
            @click="editingOptions('bait_status')"
            v-if="getBasanOptionData.bait_status.some(item => item.user_id !== 0)"
          >
            <image
              src="/static/dddr23.png"
              mode="aspectFill"
              class="size-[1rem]"
              v-if="editingStates.bait_status == '编辑'"
            />

            <view class="text-[.8125rem] text-[#919499]">
              {{ editingStates.bait_status ? '完成' : '编辑' }}
            </view>
          </view>
        </view>
        <view class="flex flex-wrap gap-3">
          <view
            class="col-span-1 flex justify-center items-center rounded-[1.125rem] p-2 border border-solid relative"
            v-for="(i, k) in getBasanOptionData.bait_status"
            :key="k"
            :class="
              isSelected('bait_status', k)
                ? 'text-[#00A9AB] bg-[#E5F6F6] border-[#00A9AB]'
                : 'text-[#171B24] bg-[#F4F6F8] border-transparent'
            "
            @click="toggleMultiSelect('bait_status', k, i.type)"
          >
            <!-- <view
              class="flex absolute -top-1 -right-1 justify-end px-1 leading-none"
              v-if="i.user_id && i.isSelected"
              @click.stop="deleteBasanOption(i.id, 'bait_status')"
            >
              <u-icon name="close" color="#919499" class="" size="22"></u-icon>
            </view>
            <text class="text-[.75rem] line-clamp-1">{{ i.name }}</text> -->
            <text class="text-[.75rem] line-clamp-1">{{ i.name }}</text>
            <view v-if="i.user_id && i.isSelected" class="ml-1" @click.stop="deleteBasanOption(i.id, 'bait_status')">
              <u-icon name="close" color="#919499" class="" size="22"></u-icon>
            </view>
          </view>
        </view>
        <view class="flex justify-between items-center">
          <view class="flex text-[.875rem] text-[#171B24]"> 自定义 </view>
        </view>
        <view class="flex flex-wrap gap-3 items-center">
          <view
            class="flex justify-center items-center rounded-[1.125rem] px-3 py-2 bg-[#F4F6F8]"
            @click="add('添加饵料状态', 'bait_status')"
          >
            <u-icon name="plus" color="#919499" size="26"></u-icon>
          </view>
        </view>
      </view>
    </yy-modal>
    <!-- 作钓类型弹框 -->
    <yy-modal v-model="showType" title="作钓类型" @reset="resetFishingType" @submit="showType = false">
      <view class="flex flex-col gap-3">
        <view class="flex text-[.875rem] text-[#171B24] justify-between">
          <view> 建议作钓类型</view>

          <view
            class="flex gap-1 items-center"
            @click="editingOptions('fish_type')"
            v-if="getBasanOptionData.fish_type.some(item => item.user_id !== 0)"
          >
            <image
              src="/static/dddr23.png"
              mode="aspectFill"
              class="size-[1rem]"
              v-if="editingStates.fish_type == '编辑'"
            />

            <view class="text-[.8125rem] text-[#919499]">
              {{ editingStates.fish_type ? '完成' : '编辑' }}
            </view>
          </view>
        </view>
        <view class="flex flex-wrap gap-3">
          <view
            class="col-span-1 flex justify-center items-center rounded-[1.125rem] p-2 border border-solid relative"
            v-for="(i, k) in getBasanOptionData.fish_type"
            :key="k"
            :class="
              isSelected('fish_type', k)
                ? 'text-[#00A9AB] bg-[#E5F6F6] border-[#00A9AB]'
                : 'text-[#171B24] bg-[#F4F6F8] border-transparent'
            "
            @click="toggleMultiSelect('fish_type', k, i.type)"
          >
            <!-- <view
              class="flex absolute -top-1 -right-1 justify-end px-1 leading-none"
              v-if="i.user_id && i.isSelected"
              @click.stop="deleteBasanOption(i.id, 'fish_type')"
            >
              <u-icon name="close" color="#919499" class="" size="22"></u-icon>
            </view>

            <text class="text-[.75rem] line-clamp-1">{{ i.name }}</text> -->
            <text class="text-[.75rem] line-clamp-1">{{ i.name }}</text>
            <view v-if="i.user_id && i.isSelected" class="ml-1" @click.stop="deleteBasanOption(i.id, 'fish_type')">
              <u-icon name="close" color="#919499" class="" size="22"></u-icon>
            </view>
          </view>
        </view>
        <view class="flex justify-between items-center">
          <view class="flex text-[.875rem] text-[#171B24]"> 自定义 </view>
          <!-- <view class="flex gap-1 items-center">
            <image src="/static/dddr23.png" mode="aspectFill" class="size-[1rem]" />
            <view class="text-[.8125rem] text-[#919499]"> 编辑 </view>
          </view> -->
        </view>
        <view class="flex flex-wrap gap-3 items-center">
          <view
            class="flex justify-center items-center rounded-[1.125rem] px-3 py-2 bg-[#F4F6F8]"
            @click="add('添加作钓类型', 'fish_type')"
          >
            <u-icon name="plus" color="#919499" size="26"></u-icon>
          </view>
        </view>
      </view>
    </yy-modal>

    <!-- 鱼竿长度弹框 -->

    <yy-modal v-model="showFishingRod" title="鱼竿" @reset="resetFishingRod" @submit="showFishingRod = false">
      <view class="flex flex-col gap-3">
        <view class="flex text-[.875rem] text-[#171B24] justify-between">
          <view> 建议鱼竿长度/m </view>
          <view
            class="flex gap-1 items-center"
            @click="editingOptions('rod_length')"
            v-if="getBasanOptionData.rod_length.some(item => item.user_id !== 0)"
          >
            <image
              src="/static/dddr23.png"
              mode="aspectFill"
              class="size-[1rem]"
              v-if="editingStates.rod_length == '编辑'"
            />

            <view class="text-[.8125rem] text-[#919499]">
              {{ editingStates.rod_length ? '完成' : '编辑' }}
            </view>
          </view>
        </view>
        <view class="flex flex-wrap gap-3">
          <view
            class="col-span-1 flex justify-center items-center rounded-[1.125rem] p-2 border border-solid relative"
            v-for="(i, k) in getBasanOptionData.rod_length"
            :key="k"
            :class="
              isSelected('rod_length', k)
                ? 'text-[#00A9AB] bg-[#E5F6F6] border-[#00A9AB]'
                : 'text-[#171B24] bg-[#F4F6F8] border-transparent'
            "
            @click="toggleMultiSelect('rod_length', k, i.type)"
          >
            <!-- <text class="text-[.75rem] line-clamp-1"> {{ i.name }}</text>
            <view
              class="flex absolute -top-1 -right-1 justify-end px-1 leading-none"
              v-if="i.user_id && i.isSelected"
              @click.stop="deleteBasanOption(i.id, 'rod_length')"
            >
              <u-icon name="close" color="#919499" class="" size="22"></u-icon>
            </view> -->
            <text class="text-[.75rem] line-clamp-1">{{ i.name }}</text>
            <view v-if="i.user_id && i.isSelected" class="ml-1" @click.stop="deleteBasanOption(i.id, 'rod_length')">
              <u-icon name="close" color="#919499" class="" size="22"></u-icon>
            </view>
          </view>
        </view>
        <view class="flex justify-between items-center">
          <view class="flex text-[.875rem] text-[#171B24]"> 自定义 </view>
          <!-- <view class="flex gap-1 items-center">
            <image src="/static/dddr23.png" mode="aspectFill" class="size-[1rem]" />
            <view class="text-[.8125rem] text-[#919499]"> 编辑 </view>
          </view> -->
        </view>
        <view class="flex flex-wrap gap-3 items-center">
          <view
            class="flex justify-center items-center rounded-[1.125rem] px-3 py-2 bg-[#F4F6F8]"
            @click="add('添加鱼竿长度', 'rod_length')"
          >
            <u-icon name="plus" color="#919499" size="26"></u-icon>
          </view>
        </view>
      </view>
    </yy-modal>
    <!-- 子线弹框 -->
    <yy-modal v-model="showSubLines" title="子线" @reset="sublineReset" @submit="showSubLines = false">
      <view class="flex flex-col gap-3">
        <view class="flex text-[.875rem] text-[#171B24]"> 子线线号 </view>
        <view class="bg-[#F4F6F8] rounded-[.5rem] h-[2.5rem] px-2">
          <input
            type="digit"
            placeholder="建议的子线线号"
            v-model="form.sub_line_size"
            maxlength="3"
            class="size-full text-left text-[1rem] text-[#171B24]"
          />
        </view>
      </view>
    </yy-modal>
    <!--  -->
    <!--  -->
    <!-- 添加 -->
    <u-popup v-model="showAdd" mode="center" border-radius="14" length="80%">
      <view>
        <view class="flex flex-col gap-3 px-4 py-5">
          <view class="text-[1rem] text-[#171B24] font-medium text-center"> {{ showAddObj.title }} </view>
          <view class="h-[2.5rem] bg-[#F4F6F8] rounded-[.5rem] px-3 flex items-center">
            <input
              v-if="showAddObj.title == '添加鱼竿长度'"
              type="digit"
              class="w-full h-full"
              :placeholder="showAddObj.title"
              maxlength="12"
              focus
              v-model="showAddObj.value"
            />
            <input
              v-else
              type="text"
              class="w-full h-full"
              :placeholder="showAddObj.title"
              maxlength="12"
              focus
              v-model="showAddObj.value"
            />
            <!-- <view class="bg-[#C1C4C9] p-[.0625rem] rounded-full">
              <u-icon name="close"></u-icon>
            </view> -->
          </view>
        </view>
        <view class="grid grid-cols-2 border-t">
          <view class="p-3 text-[1rem] text-[#171B24] flex justify-center border-r" @click="closeAdd"> 取消</view>
          <view class="p-3 text-[1rem] text-[#00A4A6] font-bold flex justify-center" @click="confirmAdd">确认</view>
        </view>
      </view>
    </u-popup>
    <yy-showActionSheet
      :show="showActionSheet"
      :topDistance="topDistance"
      @update:show="showActionSheet = $event"
      @saveDraft="saveDraft"
    ></yy-showActionSheet>
    <yy-alert ref="alert" @alertConfirm="alertConfirm"></yy-alert>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        id: '',
        showAdd: false,
        showAddObj: {
          title: '',
          value: '',
          type: 'text'
        },
        showEditor: false,
        isScroll: false, // 是否滚动
        dataList: [], // 分页数据
        automatic: false, // 是否自动加载
        title: '手杆标点', // 页面标题
        navTitle: '', // 导航栏标题
        showFishSpecies: false, // 控制鱼种弹框显示
        showFloat: false, // 控制浮漂弹框显示
        showBait: false, // 控制饵料弹框显示
        showType: false, // 控制作钓类型弹框显示
        showMainLine: false, // 控制主线弹框显示
        showFishHooks: false, // 控制鱼钩弹框显示
        showFishingRod: false, // 控制鱼竿长度弹框显示
        showSubLines: false, // 控制子线弹框显示
        value: [], // picker-view 当前选中值
        indicatorStyle: `height: 3.125rem;`, // picker-view 选中指示器样式

        getBasanOptionData: {},
        // 字段类型:
        // fish_species=鱼种,
        // fish_type=作钓类型,
        // rod_length=鱼竿长度,
        // fish_hook_type=鱼钩类型,
        // fish_hook_size=鱼钩大小,
        // bait_name=饵料名称,
        // bait_status=饵料状态,
        // float_type=浮漂类型,
        // fish_group=钓组
        // 多选状态管理
        multiSelectState: {
          fish_species: [], // 鱼种多选状态
          fish_type: [], // 作钓类型多选状态
          rod_length: [], // 鱼竿长度多选状态
          fish_hook_type: [], // 鱼钩类型多选状态
          bait_name: [], // 饵料名称多选状态
          bait_status: [], // 饵料状态多选状态
          float_type: [], // 浮漂类型多选状态
          fish_group: [] // 钓组多选状态
        },
        form: {
          basan_type: 1, //钓点类型:1=手竿,2=路亚
          name: '',
          description: '', // 描述
          fish_species: '', // 鱼种
          fish_type: '', // 作钓类型
          rod_length: '', // 鱼竿长度
          fish_hook_type: '', // 鱼钩类型
          bait_name: '', // 饵料名称
          bait_status: '', // 饵料状态
          float_type: '', // 浮漂类型
          fish_group: '', // 钓组
          main_line_length: '', //主线长度
          main_line_size: '', //主线粗细
          sub_line_size: '', // 子线大小
          fish_hook_size: 1, // 鱼钩大小
          bait_water_ratio_min: '', // 开饵水比最小比例
          bait_water_ratio_max: '', // 开饵水比最大比例
          float_lead_weight: '', // 浮漂铅重
          // #ifdef H5
          lng: '104.06', // 经度
          lat: '30.67', // 纬度
          address: '四川省成都市武侯区天府大道北段', // 地址
          location_name: '天府大道', // 地址名称
          country: '中国', // 国家
          province: '四川省', // 省
          city: '成都市', // 市
          district: '武侯区', // 区
          // #endif

          // #ifndef H5
          lng: '', // 经度
          lat: '', // 纬度
          address: '', // 地址
          location_name: '', // 地址名称
          country: '', // 国家
          province: '', // 省
          city: '', // 市
          district: '', // 区
          // #endif

          images: ['', '', ''], // 图片
          video: '', // 视频
          imagess: [],
          thumb: '', // 钓点封面
          id: '',
          paid_amount: '',
          supervise: '',
          is_paid_spot: 0 // 0=免费,1=付费
        },
        is_paid: false,
        selectedFish: [],
        showActionSheet: false,
        topDistance: '',
        fish_species: [],
        editingStates: {
          fish_type: false,
          fish_hook_type: false,
          float_type: false,
          bait_status: false,
          rod_length: false,
          bait_name: false,
          fish_group: false
        },
        isEdit: false,
        draft: false,
        hasUserData: false
      }
    },
    created() {
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(this)
        query
          .select('#titles')
          .boundingClientRect(data => {
            console.log('data==> ', data)
            console.log('得到布局位置信息' + JSON.stringify(data))

            if (data) {
              this.topDistance = data.top
            }
          })
          .exec()
      }, 0)
    },
    onLoad(options) {
      this.id = options.id
      options.id && (this.form.id = options.id)

      this.isEdit = options.isEdit
      this.draft = options.draft

      this.getBasanOption()
    },
    watch: {
      form: {
        deep: true,
        handler(newValue, oldValue) {
          this.hasUserData = true
        }
      }
    },

    onPageScroll({ scrollTop }) {
      const show = scrollTop > 30
      this.navTitle = show ? this.title : ''
      this.isScroll = show
    },
    beforeDestroy() {
      // 组件销毁前清除定时器
      if (this.debounceTimer) {
        clearTimeout(this.debounceTimer)
      }
    },

    methods: {
      custombackEvent() {
        console.log('this.hasUserData==> ', this.hasUserData)
        this.hasUserData ? (this.showActionSheet = !this.showActionSheet) : vk.navigateBack()
      },
      validateInput({ detail: { value: val } }) {
        if (isNaN(val)) {
          vk.toast('请输入有效的数字')
        } else if (val < this.getBasanOptionData.price_range[0]) {
          this.form.paid_amount = this.getBasanOptionData.price_range[0]
        } else if (val > this.getBasanOptionData.price_range[1]) {
          this.form.paid_amount = this.getBasanOptionData.price_range[1]
        }
      },
      alertConfirm() {
        vk.myfn.openLocationSettings()
      },
      fullScreenPlayback(video) {
        // 播放 video
        vk.navigateTo('/pages/index/fullscreen?video=' + video)
      },

      openCharging() {
        this.is_paid = !this.is_paid
        // 关闭付费时重置金额为0
        if (!this.is_paid) {
          this.form.paid_amount = ''
          this.form.is_paid_spot = 0
        } else {
          this.form.is_paid_spot = 1
        }
      },
      async saveDraft() {
        const form = {
          ...this.form,
          // 合并并过滤两个图片数组,用|连接成字符串
          images: (() => {
            const allImages = [...this.form.images, ...this.form.imagess] //.filter(Boolean)
            return allImages.length ? allImages.join('|') : ''
          })()
        }

        const res = await api[this.id ? 'updateDraft' : 'saveDraft'](form)

        if (!res.code) {
          vk.toast(res.msg, 'none')
          return
        }

        vk.toast('草稿已保存', 300, () => {
          vk.navigateBack()
        })
      },
      jumpToSelectFish() {
        vk.navigateTo({
          url: '/pages/index/selectFish?basan_type=2',
          events: {},
          success: res => {
            // console.log('this.selectedFish==> ', this.selectedFish)
            // 传递选中的鱼种数据和已选中的鱼种ID数组
            res.eventChannel.emit('datass', this.fish_species)
            vk.$on('update', data => {
              this.selectedFish = data
              this.form.fish_species = data.map(item => item.id)
            })
          }
        })
      },
      async editAssignment() {
        let { data } = await api.getBasanDetail({
          id: this.id
        })

        console.log('data==> ', data)
        this.form.name = data.name
        this.form.description = data.description
        this.form.fish_species = data.ext?.fish_species?.length ? data.ext.fish_species.map(item => item.id) : []
        this.fish_species = data.ext?.fish_species
        this.form.fish_type = data.fish_type
        this.form.rod_length = data.rod_length
        this.form.fish_hook_type = data.fish_hook_type
        this.form.bait_name = data.bait_name
        this.form.bait_status = data.bait_status
        this.form.float_type = data.float_type
        this.form.fish_group = data.fish_group
        this.form.main_line_length = data.main_line_length
        this.form.main_line_size = data.main_line_size
        this.form.sub_line_size = data.sub_line_size
        this.form.fish_hook_size = data.fish_hook_size
        this.form.bait_water_ratio_min = data.bait_water_ratio_min
        this.form.bait_water_ratio_max = data.bait_water_ratio_max
        this.form.float_lead_weight = data.float_lead_weight
        this.form.lng = data.lng
        this.form.lat = data.lat
        this.form.address = data.address
        this.form.location_name = data.location_name
        this.form.country = data.country
        this.form.province = data.province
        this.form.city = data.city
        this.form.district = data.district
        this.form.video = data.video
        let [a1, a2, a3, ...b] = data.images
        this.form.images = [a1, a2, a3]
        this.form.imagess = b
        this.form.thumb = a1
        this.form.paid_amount = Number(data.paid_amount).toFixed(0)

        this.form.is_paid_spot = data.is_paid_spot
        this.form.supervise = data.supervise
        this.is_paid = !!data.is_paid_spot
      },
      getDetails() {},
      getNameById(fieldType, id) {
        const dataSource = this.getDataSource(fieldType)
        const item = dataSource.find(item => item.id === id)
        return item ? item.name : ''
      },
      deleteVideo(e) {
        this.form.video = ''
      },
      videoUpload() {
        vk.myfn
          .uploadVideo()
          .then(result => {
            this.form.video = result.url
          })
          .catch(err => {})
      },
      deleteImage(index) {
        this.form.images.splice(index, 1)
      },
      deleteImages(index) {
        this.form.imagess.splice(index, 1)
      },
      async uploads(i) {
        try {
          const url = await vk.myfn.uploadImage({
            count: 1,
            topic: 'products'
          })
          console.log('url==> ', url)
          if (i) {
            this.form.images[i - 1] = url[0]
            if (i == 1) this.form.thumb = url[0]
          } else {
            this.form.imagess.push(url[0])
          }
        } catch (err) {
          console.error('上传失败:', err)
        }
      },
      editingOptions(e) {
        // 切换编辑状态
        this.editingStates[e] = !this.editingStates[e]

        // 如果是进入编辑模式，显示删除按钮
        if (this.editingStates[e]) {
          this.getBasanOptionData[e].forEach(item => {
            item.isSelected = true
          })
        } else {
          // 如果是退出编辑模式，隐藏删除按钮
          this.getBasanOptionData[e].forEach(item => {
            item.isSelected = false
          })
        }

        this.getBasanOptionData = { ...this.getBasanOptionData }
        console.log('🚀 ~ editingOptions ~ this.getBasanOptionData :', this.getBasanOptionData)
      },
      fishHookReset() {
        this.form.fish_hook_type = ''
        this.multiSelectState.fish_hook_type = []
        this.form.fish_hook_size = 1
      },
      fishSpeciesReset() {
        this.form.fish_species = ''
        this.multiSelectState.fish_species = []
      },
      resetFishingType() {
        this.form.fish_type = ''
        this.multiSelectState.fish_type = []
      },
      resetFishingRod() {
        this.form.rod_length = ''
        this.multiSelectState.rod_length = []
      },
      baitReset() {
        this.form.bait_name = ''
        this.multiSelectState.bait_name = []
        this.form.bait_water_ratio_min = ''
        this.form.bait_water_ratio_max = ''
        this.form.bait_status = ''
        this.multiSelectState.bait_status = []
      },
      sublineReset() {
        this.form.sub_line_size = ''
      },
      resetFloat() {
        this.form.float_type = ''
        this.form.float_lead_weight = ''
        this.multiSelectState.float_type = []
      },
      resetMainLine() {
        this.form.main_line_length = ''
        this.form.main_line_size = ''
      },
      // 获取钓点选项
      async getBasanOption() {
        let res = await api.getBasanOption({
          basan_type: 1 //钓点类型:1=手竿,2=路亚
        })
        if (!res.code) return
        if (this.id) this.editAssignment()
        this.getBasanOptionData = res.data
      },
      // 新增钓点选项

      // 删除钓点选项
      async deleteBasanOption(id, type) {
        // 调用删除接口
        let res = await api.deleteBasanOption({ ids: id })
        if (!res.code) return vk.toast(res.msg)
        vk.toast(res.msg)
        // 更新本地数据
        if (this.getBasanOptionData[type]) {
          this.getBasanOptionData[type] = this.getBasanOptionData[type].filter(item => item.id !== id)
        }
        // 清空该类型的选中索引
        if (this.multiSelectState[type]) {
          this.multiSelectState[type] = []
        }

        // 更新表单数据
        this.updateFormField(type)
      },
      //重置
      resetForm(e, i) {
        this.e = false
        this.form[i] = ''
        this.multiSelectState[i] = []
      },
      // 发布钓点
      release() {
        let form = {
          ...this.form,
          images: [...this.form.images, ...this.form.imagess].join('|') // 创建新数组并转换为字符串
        }
        if (!this.form.name) return vk.toast('请输入钓点名称', 'none')
        if (!this.form.description) return vk.toast('请输入钓点描述', 'none')
        if (!this.form.images[0]) return vk.toast('请上传封面图', 'none')
        if (!this.form.images[1]) return vk.toast('请上传环境图', 'none')
        if (!this.form.images[2]) return vk.toast('请上传鱼获图', 'none')

        this.id ? (this.form.id = this.id) : delete this.form.id
        let requestMethod = this.id ? api.editBasan(form) : api.addBasan(form)
        vk.showLoading('发布中...')

        requestMethod
          .then(res => {
            if (!res.code) return vk.toast(res.msg)
            // 创建一个新对象来避免修改原数据

            vk.navigateBack()
          })
          .catch(err => {})
          .finally(() => {
            vk.hideLoading()
          })
      },

      // 通用的打开弹框并设置选中状态的方法
      openModalWithSelection(modalType) {
        const modalConfig = {
          fish_type: {
            formField: 'fish_type',
            dataSource: 'fish_type',
            stateField: 'fish_type',
            modalField: 'showType'
          },
          rod_length: {
            formField: 'rod_length',
            dataSource: 'rod_length',
            stateField: 'rod_length',
            modalField: 'showFishingRod'
          },
          fish_hook_type: {
            formField: 'fish_hook_type',
            dataSource: 'fish_hook_type',
            stateField: 'fish_hook_type',
            modalField: 'showFishHooks'
          },
          float_type: {
            formField: 'float_type',
            dataSource: 'float_type',
            stateField: 'float_type',
            modalField: 'showFloat'
          },
          bait_name: {
            formField: 'bait_name',
            dataSource: 'bait_name',
            stateField: 'bait_name',
            modalField: 'showBait'
          },
          bait_status: {
            formField: 'bait_status',
            dataSource: 'bait_status',
            stateField: 'bait_status',
            modalField: 'showBait'
          }
        }

        const config = modalConfig[modalType]
        if (!config) return

        // 设置选中状态
        if (this.form[config.formField] && this.getBasanOptionData[config.dataSource]) {
          const selectedIndex = this.getBasanOptionData[config.dataSource].findIndex(
            item => item.id === this.form[config.formField]
          )
          if (selectedIndex !== -1) {
            this.multiSelectState[config.stateField] = [selectedIndex]
          }
        }

        // 打开弹框
        this[config.modalField] = true
      },

      // 确认添加
      async confirmAdd() {
        api
          .addBasanOption({
            basan_type: 1, //钓点类型:1=手竿,2=路亚
            name: this.showAddObj.value,
            type: this.showAddObj.type
          })
          .then(result => {
            console.log('🚀 ~ confirmAdd ~ result:', result)
            this.showAddObj.value = ''
            vk.toast(result.msg)
            if (!result.code) return
            this.showAdd = false
            this.getBasanOption()
            Object.keys(this.editingStates).forEach(key => {
              this.editingStates[key] = false
            })
          })
          .catch(err => {})
      },
      // 关闭添加弹框
      closeAdd() {
        this.showAdd = false
        this.showAddObj.value = ''
      },

      scroll({ detail: { scrollTop } }) {
        const show = scrollTop > 60
        this.navTitle = show ? this.title : ''
        this.isScroll = show
      },
      //
      add(e, type) {
        if (e == '添加鱼竿长度') {
          this.showAddObj.type = 'number'
        } else {
          this.showAddObj.type = 'text'
        }
        this.showAdd = true
        this.showAddObj.title = e
        this.showAddObj.type = type
      },

      bindChange(e) {
        this.form.fish_hook_size = e.detail.value[0]
        console.log('e==> ', e.detail.value[0])
        console.log('picker-view change', this.value)
      },

      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      },
      openMap() {
        if (!vk.myfn.checkLocationPermission()) {
          this.$refs.alert.config({
            show: true,
            title: '开启定位',
            describe: '定位权限未开启，是否前往设置开启定位',
            cancel: '取消',
            cancelColor: '#5C6068',
            confirm: '前往开启',
            confirmColor: '#00A9AB',
            eventType: 'openLocation'
          })
          return
        }
        vk.myfn.chooseLocation().then(res => {
          this.form.lng = res.longitude
          this.form.lat = res.latitude
          this.form.address = res.address
          this.form.location_name = res.name
          this.form.country = '中国'
          this.form.province = res.address.match(/^(.*?省)/)?.[1] || ''
          this.form.city = res.address.match(/省(.*?市)/)?.[1] || ''
          this.form.district = res.address.match(/市(.*?区)/)?.[1] || ''
        })
      },
      isSelected(fieldType, index) {
        const selectedIndexes = this.multiSelectState[fieldType] || []
        return selectedIndexes.includes(index)
      },
      getDataSource(fieldType) {
        const dataMap = {
          fish_species: this.getBasanOptionData.fish_species || [],
          fish_type: this.getBasanOptionData.fish_type || [],
          rod_length: this.getBasanOptionData.rod_length || [],
          fish_hook_type: this.getBasanOptionData.fish_hook_type || [],
          bait_name: this.getBasanOptionData.bait_name || [],
          bait_status: this.getBasanOptionData.bait_status || [],
          float_type: this.getBasanOptionData.float_type || [],
          fish_group: this.getBasanOptionData.fish_group || []
        }
        return dataMap[fieldType] || []
      },
      updateFormField(fieldType) {
        const selectedIndexes = this.multiSelectState[fieldType] || []
        const dataSource = this.getDataSource(fieldType)

        if (dataSource && dataSource.length > 0) {
          // 获取选中的id值
          const selectedValues = selectedIndexes
            .map(index => {
              const item = dataSource[index]
              return item ? item.id : ''
            })
            .filter(value => value !== '')

          // 如果是fish_species类型,保持数组形式
          // 其他类型取第一个值
          if (fieldType === 'fish_species') {
            this.form[fieldType] = selectedValues
          } else {
            this.form[fieldType] = selectedValues[0] || ''
          }
        }
      },
      toggleMultiSelect(fieldType, index, value) {
        if (!this.multiSelectState[fieldType]) {
          this.$set(this.multiSelectState, fieldType, [])
        }
        const selectedIndexes = this.multiSelectState[fieldType]
        if (fieldType === 'fish_species') {
          const indexPosition = selectedIndexes.indexOf(index)

          if (indexPosition > -1) {
            selectedIndexes.splice(indexPosition, 1)
          } else {
            selectedIndexes.push(index)
          }
        } else {
          selectedIndexes.splice(0, selectedIndexes.length) // 清空数组
          selectedIndexes.push(index) // 添加当前选中项
        }

        this.updateFormField(fieldType)
      }
    }
  }
</script>

<style lang="scss" scoped>
  uni-modal {
    .uni-modal {
      z-index: 22222 !important;
    }
  }

  .pages {
    background-image: url('/static/dddr69.png') !important;
    background-repeat: no-repeat !important;
    background-size: 100% !important;
    background-position: top !important;
    background-color: #f4f6f8 !important;
  }

  input::placeholder {
    font-size: 0.9375rem;
    color: #c1c4c9;
  }

  .input-placeholder {
    font-size: 0.9375rem;
    color: #c1c4c9;
  }

  .picker-view {
    // width: 750rpx;
    height: 450rpx;
    // margin-top: 20rpx;
  }

  .item {
    line-height: 100rpx;
    text-align: center;
  }
</style>
